<template>
  <a-layout class="layout">
    <a-layout-sider class="sider"
      ><a-menu
        v-model:openKeys="openKeys"
        v-model:selectedKeys="selectedKeys"
        style="100%"
        mode="inline"
      >
        <a-sub-menu key="sub1" title="运行监控">
          <template #icon>
            <PieChartOutlined />
          </template>
          <a-menu-item key="/dashborad-neuron"
            >Neuron <router-link to="/dashborad-neuron"
          /></a-menu-item>
          <a-menu-item key="/dashborad-tdengine"
            >TDengine <router-link to="/dashborad-tdengine"
          /></a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2" title="配置中心">
          <template #icon>
            <AppstoreOutlined />
          </template>
          <a-menu-item key="/point"
            >采集点位 <router-link to="/point" />
          </a-menu-item>
          <a-menu-item key="/neuron"
            >Neuron <router-link to="/neuron"
          /></a-menu-item>
          <a-menu-item key="/history"
            >历史曲线 <router-link to="/history" />
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3" title="系统配置">
          <template #icon>
            <SettingOutlined />
          </template>
          <a-menu-item key="9">Option 9</a-menu-item>
          <a-menu-item key="10">Option 10</a-menu-item>
          <a-menu-item key="11">Option 11</a-menu-item>
          <a-menu-item key="12">Option 12</a-menu-item>
        </a-sub-menu>
      </a-menu></a-layout-sider
    >
    <a-layout>
      
      <a-layout-content class="content">
        <router-view />
      </a-layout-content>
      <a-layout-footer>{{ts}}</a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script setup>
import {
  MailOutlined,
  QqOutlined,
  AppstoreOutlined,
  SettingOutlined,
  PieChartOutlined,
} from "@ant-design/icons-vue";
import { onMounted } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { ref } from "vue";
const router = useRouter();

const openKeys = ref([]);
const selectedKeys = ref([]);
const ts = ref("");

onMounted(() => {
  openKeys.value = [router.currentRoute.value.meta.subkey];
  selectedKeys.value = [router.currentRoute.value.fullPath];
  setInterval(() => {
    getTs();
  }, 1000);
});

const getTs = () => {
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  let hour = date.getHours();
  let minute = date.getMinutes();
  let second = date.getSeconds();
  let time =
    year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
  ts.value = time;
};
</script>

<style scoped>
.layout {
  width: 100%;
  height: 100%;
}
.sider {
  background: #fff;
  overflow-y: auto;
}
.content {
  background: #ccc;
  height: 100%;
  /* overflow-y: auto; */
  overflow: hidden;
}
</style>
